<!--
 @description 详情内容模块
 @fileName DetailInfo.vue
 @author zengqiongying
 @created 2023/04/21 12:44:44
-->
<template>
  <div class="archive-change-detail">
    <qmp-tabs v-model:active="tabActive" :offset-top="offsetTop" scrollspy sticky>
      <qmp-tab title="基础信息">
        <!-- <div class="c-tab-title"><div class="name">经销商-基本信息</div></div> -->
        <Card no-mg :round="false">
          <Cell title="办事处" default-value="--" readonly :modelValue="detail.officeName" />
          <Cell
            title="是否需要其他业务客户经理接收知晓"
            :modelValue="detail.isOtherReceiveManagerKnow"
            default-value="--"
            readonly
            dict-type-code="BOOLEANS"
          />
          <template v-if="[1, '1'].includes(detail.isOtherReceiveManagerKnow)">
            <Cell title="接收客户经理" default-value="--" readonly :modelValue="detail.receiveManagerName" />
            <template v-if="!!detail.receiveManagerCode">
              <Cell :modelValue="detail.receiveManagerCode" title="接收客户经理编码" readonly />
              <Cell :modelValue="detail.receiveManagerTypeName" title="接收客户经理类型" readonly />
              <Cell :modelValue="detail.receiveManagerTel" title="接收客户经理电话" readonly />
            </template>
          </template>
          <Cell title="提报意见" is-column custom :right="false" :modelValue="detail.submitAnOpinion" readonly />
        </Card>
        <Card>
          <Cell title="经销商系统名称" default-value="--" readonly :modelValue="detail.customerName" />
          <Cell title="经销商姓名" default-value="--" readonly :modelValue="detail.legalPerson" />
          <Cell title="经销商身份证号" default-value="--" readonly :modelValue="detail.credentialNo" />
          <!-- <Cell title="身份证详细地址" default-value="--" readonly :modelValue="detail.disAddr" /> -->
          <Cell
            title="合作起始日期"
            default-value="--"
            readonly
            :modelValue="parseTime(detail.cooperateStart, '{y}年{m}月{d}日')"
          />
          <Cell
            title="是否缴纳保证金"
            default-value="--"
            readonly
            :modelValue="[1, '1'].includes(detail.isDeposit) ? '是' : '否'"
          />
          <template v-if="[1, '1'].includes(detail.isDeposit)">
            <Cell
              title="保证金缴纳日期"
              default-value="--"
              readonly
              :modelValue="parseTime(detail.depositDate, '{y}年{m}月{d}日')"
            />
            <Cell title="成品保证金金额" default-value="--" custom readonly> {{ detail.finishedDeposit }} 元 </Cell>
            <Cell title="定制保证金金额" default-value="--" custom readonly> {{ detail.customizedDeposit }} 元</Cell>
            <Cell title="橱柜保证金金额" default-value="--" custom readonly> {{ detail.cupboardDeposit }} 元</Cell>
            <Cell title="卫浴保证金金额" default-value="--" custom readonly> {{ detail.bathroomDeposit }} 元</Cell>
          </template>
        </Card>

        <Card title="经销商附件" no-mg :round="false">
          <Cell title="身份证正反面" is-column custom readonly>
            <UploadIdCard
              v-model:front-list="attachment.ACCESS050"
              v-model:back-list="attachment.ACCESS051"
              :objectId="id"
              readonly
            />
          </Cell>
          <Cell title="资金安全告知函" is-column custom readonly>
            <AttachmentUpload v-model="attachment.ACCESS052" type-code="ACCESS052" :objectId="id" readonly />
            <div v-if="attachment.ACCESS052.length === 0" class="no-data-msg">暂无数据</div>
          </Cell>
          <Cell title="签字签章函" is-column custom readonly>
            <AttachmentUpload v-model="attachment.ACCESS053" type-code="ACCESS053" :objectId="id" readonly />
            <div v-if="attachment.ACCESS053.length === 0" class="no-data-msg">暂无数据</div>
          </Cell>
          <Cell title="收货地址确认单" is-column custom readonly>
            <AttachmentUpload v-model="attachment.ACCESS054" type-code="ACCESS054" :objectId="id" readonly />
            <div v-if="attachment.ACCESS054.length === 0" class="no-data-msg">暂无数据</div>
          </Cell>
        </Card>
      </qmp-tab>
      <qmp-tab title="收货地址">
        <Card no-mg :round="false">
          <template #title>
            <div class="c-tab-title">
              <div class="name">经销商收货地址</div>
              <div v-if="addressList.length > 0" class="more" @click="toPage('address')">详情</div>
            </div>
          </template>
          <Cell v-for="(item, i) in addressList" :key="i" is-column custom readonly>
            <div class="dis-detail-item">
              <div class="name">
                {{ item.name }}
              </div>
              <div class="color-grey">
                {{ item.provinceName }}{{ item.cityName }}{{ item.countryName }}{{ item.townName }}
                {{ item.address }}
              </div>
              <div class="person">
                {{ item.firstReceiver }} <span class="ml8">{{ item.firstReceiverPhone }}</span>
              </div>
            </div>
          </Cell>
          <qmp-empty v-if="addressList.length === 0" description="暂无经销商收货地址" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="经销商联系人">
        <Card no-mg :round="false">
          <template #title>
            <div class="c-tab-title">
              <div class="name">经销商联系人</div>
              <div v-if="contactsList.length > 0" class="more" @click="toPage('contacts')">详情</div>
            </div>
          </template>
          <Cell v-for="(item, i) in contactsList" :key="i" is-column custom readonly>
            <div class="dis-detail-item">
              <div>
                {{ item.name }}
                <span class="ml8">{{ item.contactPhone }}</span>
              </div>
              <div class="person">{{ item.contactTypeName }}</div>
            </div>
          </Cell>
          <qmp-empty v-if="contactsList.length === 0" description="暂无经销商联系人" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="经销商合伙人">
        <Card title="经销商合伙人" no-mg :round="false">
          <Cell title="是否合伙人" :modelValue="detail.isPartnership ? '是' : '否'" default-value="--" readonly />
          <template v-if="detail.isPartnership">
            <Cell v-for="(item, i) in partnersList" :key="i" is-column custom readonly>
              <div class="partner-cell">
                <div>
                  {{ item.name }} <span class="ml8">{{ item.tel }}</span>
                </div>
                <div>{{ item.credentialNo }}</div>
              </div>
            </Cell>
            <qmp-empty v-if="partnersList.length === 0" description="暂无经销商合伙人" image-size="60px" />
          </template>
        </Card>
      </qmp-tab>
      <qmp-tab title="交接情况">
        <Card title="经销商交接情况" no-mg :round="false">
          <Cell title="是否经销商交接" :modelValue="detail.isMarketConnect ? '是' : '否'" default-value="--" readonly />
          <Cell
            title="是否接管原商家门店"
            :modelValue="[1, '1'].includes(detail.isTakeOverTheOriginalStore) ? '是' : '否'"
            readonly
            defaultValue="--"
          />
          <Cell
            title="是否交接分销客户"
            :modelValue="isHandoverDistribution ? '是' : '否'"
            default-value="--"
            readonly
          />
        </Card>
        <template v-if="detail.isMarketConnect">
          <Card v-for="(item, i) in handoverList" :key="i" no-mg :round="false">
            <template #title>
              <div class="c-tab-title">
                <span class="name">交接账号{{ i + 1 }}</span>
              </div>
            </template>
            <HandoverItem :modelValue="item" :hidden-column="['fromShopCode', 'fromShopName']" />
          </Card>
          <qmp-empty v-if="handoverList.length === 0" description="暂无交接账号" image-size="60px" />
        </template>
        <Card title="经销商交接附件" no-mg :round="false">
          <Cell title="经销商交接证明" is-column custom readonly>
            <AttachmentUpload v-model="attachment.ACCESS058" type-code="ACCESS058" :objectId="detail.id" readonly />
            <div v-if="attachment.ACCESS058.length === 0" class="no-data-msg">暂无数据</div>
          </Cell>
          <Cell title="经销商关系证明" is-column custom readonly>
            <AttachmentUpload v-model="attachment.ACCESS059" type-code="ACCESS059" :objectId="detail.id" readonly />
            <div v-if="attachment.ACCESS059.length === 0" class="no-data-msg">暂无数据</div>
          </Cell>
          <Cell title="交接双方现场签订照片" is-column custom readonly>
            <AttachmentUpload v-model="attachment.ACCESS111" type-code="ACCESS111" :objectId="detail.id" readonly />
            <div v-if="attachment.ACCESS111.length === 0" class="no-data-msg">暂无数据</div>
          </Cell>
        </Card>
      </qmp-tab>
      <qmp-tab title="门店基本信息">
        <Card title="经销商门店信息" no-mg :round="false" />
        <template v-if="![1, '1'].includes(detail.isTakeOverTheOriginalStore)">
          <Card title="经销商门店信息" no-mg :round="false">
            <ShopItem :modelValue="shopInfo" />
          </Card>
          <Card no-mg :round="false" title="门店附件">
            <Cell title="营业执照图片" is-column custom readonly>
              <AttachmentUpload
                v-model="attachment.ACCESS055"
                view-type="image"
                type-code="ACCESS055"
                :limit="1"
                :objectId="shopInfo.id"
                :imageHeight="124"
                :imageColumn="2"
                readonly
              />
              <div v-if="attachment.ACCESS055.length === 0" class="no-data-msg">暂无数据</div>
            </Cell>
            <Cell title="专卖店特许经营合同图片" is-column custom readonly>
              <!-- <AttachmentUpload
              v-model="attachment.ACCESS056"
              view-type="image"
              type-code="ACCESS056"
              :limit="1"
              :objectId="shopInfo.id"
              :imageHeight="124"
              :imageColumn="2"
              readonly
            /> -->
              <AttachmentUpload v-model="attachment.ACCESS056" type-code="ACCESS056" :objectId="shopInfo.id" />
              <div v-if="attachment.ACCESS056.length === 0" class="no-data-msg">暂无数据</div>
            </Cell>
          </Card>
        </template>
        <template v-else>
          <TakeOriginalStore v-if="detail.code" :changeCode="detail.code" />
        </template>
      </qmp-tab>
      <qmp-tab title="门店联系人">
        <Card no-mg :round="false">
          <template #title>
            <div class="c-tab-title">
              <div class="name">门店联系人</div>
              <div v-if="shopContactsList.length > 0" class="more" @click="toPage('shopContacts')">详情</div>
            </div>
          </template>
          <Cell v-for="(item, i) in shopContactsList" :key="i" is-column custom readonly>
            <div class="dis-detail-item">
              <div>
                {{ item.name }}
                <span class="ml8">{{ item.contactPhone }}</span>
              </div>
              <div class="person">{{ item.contactTypeName }}</div>
            </div>
          </Cell>
          <qmp-empty v-if="shopContactsList.length === 0" description="暂无门店联系人" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab v-if="![1, '1'].includes(detail.isTakeOverTheOriginalStore)" title="报图信息">
        <Card title="报图信息" no-mg :round="false">
          <Cell title="是否报图" :modelValue="shopInfo.isReportPic ? '是' : '否'" default-value="--" readonly />
          <Cell
            title="特殊建档附件"
            sub-title="(如未报图/未交保证金等情况，业务请示申请审核通过的流程附件)"
            is-column
            custom
            readonly
          >
            <AttachmentUpload v-model="attachment.ACCESS057" type-code="ACCESS057" :objectId="shopInfo.id" readonly />
            <div v-if="attachment.ACCESS057.length === 0" class="no-data-msg">暂无数据</div>
          </Cell>
        </Card>
      </qmp-tab>
      <qmp-tab title="BPM审批信息">
        <Card title="审核结果" no-mg :round="false">
          <Cell title="申请人" :modelValue="detail.createBy" default-value="--" readonly />
          <Cell
            title="申请时间"
            :modelValue="parseTime(detail.createTime, '{y}年{m}月{d}日')"
            default-value="--"
            readonly
          />
          <Cell title="BPM单号" :modelValue="detail.applyNo" default-value="--" readonly divider />
          <div v-for="(v, i) in detail.opinionDTOS" :key="i" class="group-box">
            <Cell title="步骤名" :modelValue="v.strStepName" default-value="--" custom readonly />
            <Cell title="操作时间" :modelValue="v.dtCreateDate" default-value="--" readonly />
            <Cell title="操作人" :modelValue="v.strApproverName" default-value="--" readonly />
            <Cell title="操作状态" :modelValue="v.strAction" default-value="--" readonly />
            <Cell title="意见留言" :modelValue="v.strComments" default-value="--" custom readonly />
          </div>
          <!-- <Cell title="门店新建提报原始表单" is-column custom readonly divider>
            <AttachmentUpload v-model="attachment.ACCESS080" type-code="ACCESS080" readonly :objectId="detail.id" />
          </Cell>
          <Cell
            title="办事处审批结果"
            :modelValue="detail.officeReviewResult"
            dictTypeCode="REVIEW_RESULT"
            default-value="--"
            readonly
            custom
          />
          <Cell
            title="办事处审批完成时间"
            :modelValue="parseTime(detail.officeReviewTime, '{y}年{m}月{d}日')"
            default-value="--"
            readonly
          />
          <Cell
            title="办事处审批意见"
            :modelValue="detail.officeReviewAdvice"
            default-value="--"
            readonly
            is-column
            custom
          />
          <Cell
            title="办事处会计处理意见"
            :modelValue="detail.officeAccountingReviewAdvice"
            default-value="--"
            readonly
            is-column
            custom
            divider
          />
          <Cell
            title="档案科审核结果"
            :modelValue="detail.fileReviewResult"
            dictTypeCode="REVIEW_RESULT"
            default-value="--"
            readonly
            custom
          />

          <Cell
            title="档案科审批时间"
            :modelValue="parseTime(detail.fileReviewTime, '{y}年{m}月{d}日')"
            default-value="--"
            readonly
          />
          <Cell
            title="档案审核意见"
            :modelValue="detail.fileReviewAdvice"
            default-value="--"
            readonly
            is-column
            custom
            divider
          />
          <Cell
            title="系统权限处理审核结果"
            :modelValue="detail.authorityReviewResult"
            default-value="--"
            readonly
            custom
          />

          <Cell
            title="系统权限处理审核时间"
            :modelValue="parseTime(detail.authorityReviewTime, '{y}年{m}月{d}日')"
            default-value="--"
            readonly
          />
          <Cell
            title="系统权限处理审核意见"
            :modelValue="detail.authorityReviewAdvice"
            default-value="--"
            readonly
            is-column
            custom
          />
        </Card> -->
        </Card></qmp-tab
      >
    </qmp-tabs>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, toRefs, reactive, watch, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { parseTime } from '@/utils'
  import { detail } from '@/apis/dealerMarketing/NewArchive'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import AttachmentUpload from '@/components/AttachmentUpload/index.vue'
  import ShopItem from '../components/Shop/CreateItemView.vue'
  import TakeOriginalStore from './detail/TakeOriginalStore.vue'
  import HandoverItem from '../components/Handover/ItemView.vue'
  import UploadIdCard from '../components/UploadIdCard/index.vue'

  interface anyObjectModle {
    [key: string]: any
  }
  export default defineComponent({
    name: 'NewArchiveDetailInfo',
    components: { Card, Cell, AttachmentUpload, HandoverItem, ShopItem, TakeOriginalStore, UploadIdCard },
    props: {
      id: {
        type: String,
        default: ''
      }
    },
    setup(props, ctx) {
      const $router = useRouter()
      const datas = reactive<anyObjectModle>({
        tabActive: '基础信息',
        offsetTop: '46px',
        detail: {},
        isHandoverDistribution: false,
        attachment: {
          ACCESS050: [],
          ACCESS051: [],
          ACCESS052: [],
          ACCESS053: [],
          ACCESS054: [],
          ACCESS055: [],
          ACCESS056: [],
          ACCESS057: [],
          ACCESS058: [],
          ACCESS059: [],
          ACCESS080: [],
          ACCESS111: []
        }
      })

      const addressList = computed(() => {
        return datas.detail?.addressDTOS || []
      })

      const contactsList = computed(() => {
        const list = datas.detail?.contactDTOS || []
        return list.filter((v: any) => v.contactScope === 1)
      })

      const partnersList = computed(() => {
        return datas.detail?.partnerDTOS || []
      })
      // 原商家客户编码
      const fromCustomerCodes = computed(() => {
        const handovers = datas.detail?.handoverDTOS || []
        return handovers.map((v: any) => {
          return v.fromCustomerCode
        })
      })

      // 门店
      const shopInfo = computed(() => {
        return datas.detail?.shopDTO || {}
      })
      //门店联系人
      const shopContactsList = computed(() => {
        const list = datas.detail?.contactDTOS || []
        return list.filter((v: any) => v.contactScope === 3)
      })
      // 交接情况
      const handoverList = computed(() => {
        return datas.detail?.handoverDTOS || []
      })

      const getDetail = () => {
        const id = `${props.id}`
        detail(id).then((res) => {
          datas.detail = res.data
          const handoverDTOS = res.data?.handoverDTOS || []
          datas.isHandoverDistribution = handoverDTOS.some((e: any) => [1, '1'].includes(e.isHandoverDistribution))
          ctx.emit('data-change', datas.detail)
        })
      }
      watch(
        () => props.id,
        () => {
          getDetail()
        },
        {
          immediate: true
        }
      )
      onMounted(() => {
        const el = document.querySelector('.qmp-nav-bar--fixed')
        const rect = el && el.getBoundingClientRect()
        datas.offsetTop = `${rect?.height}px`
      })

      const toPage = (path: string) => {
        $router.push({
          path: '/dealerNewArchive/detail/' + path,
          query: {
            id: props.id
          }
        })
      }

      getDetail()

      return {
        ...toRefs(datas),
        shopContactsList,
        addressList,
        contactsList,
        partnersList,
        shopInfo,
        handoverList,
        fromCustomerCodes,
        parseTime,
        toPage
      }
    }
  })
</script>
<style lang="less" scoped>
  .archive-change-detail {
    /deep/ .group-card {
      margin-left: 0;
      margin-right: 0;
    }
    /deep/ .qmp-tab {
      font-weight: bold;
    }
    .c-tab-title {
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-global-weaker);
      .name {
        font: var(--font-main-title-strengthen);
        color: var(--texticon-default-strong);
      }
      .more {
        margin-left: auto;
        display: flex;
        align-items: center;
        font: var(--font-main-body);
        color: var(--texticon-default-stronger);
        &::before {
          content: '';
          width: 24px;
          height: 24px;
          margin-left: 4px;
          background-size: 24px 24px;
          background-repeat: no-repeat;
          background-image: url(~@/assets/images/more.png);
        }
      }
    }
  }
  .ml8 {
    margin-left: 8px;
  }
  .w-normal {
    font-weight: normal;
  }
  .dis-detail-item {
    font: var(--font-main-body);
    color: var(--texticon-default-strong);
    .name {
      font: var(--font-main-title-strengthen);
      color: var(--texticon-default-strong);
      margin-bottom: 2px;
    }
    .person {
      margin-top: 4px;
      color: var(--texticon-color-brand-normal);
    }
  }
  .partner-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:last-child {
      margin-left: auto;
    }
  }
</style>
